<template>


  <div class="divBox">


    <el-dialog :visible.sync="adVisible" title="新增用户" style="width: 900px;margin: 0 auto;">
      <el-form  :model="adUser">
        <el-form-item label="用户名称">
          <el-input v-model="adUser.username"></el-input>
        </el-form-item>
        <el-form-item label="用户昵称">
          <el-input v-model="adUser.name"></el-input>
        </el-form-item>
        <el-form-item label="所属部门 (输入部门id)">
          <el-input v-model="adUser.deptId"></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="adUser.phone"></el-input>
        </el-form-item>
      </el-form>
      <div>
        <el-button @click="adVisible=false">取消</el-button>
        <el-button @click="addUser">确定</el-button>
      </div>
    </el-dialog>

    <el-tree :data="depts" :props="defaultProps"  @node-click="handleClick"
             style="width: 150px;height: 200px;background: none;padding-top: 20px">

    </el-tree>

    <el-dialog :visible.sync="udVisible" title="修改用户" style="width: 900px;margin: 0 auto">
      <el-form  :model="udUser">
        <el-form-item label="用户名称">
          <el-input v-model="udUser.username"></el-input>
        </el-form-item>
        <el-form-item label="用户昵称">
          <el-input v-model="udUser.name"></el-input>
        </el-form-item>
        <el-form-item label="所属部门">
          <el-input v-model="id"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio v-model="udUser.status" label="1">正常</el-radio>
          <el-radio v-model="udUser.status" label="0">停用</el-radio>
        </el-form-item>
      </el-form>
      <div>
        <el-button @click="udVisible=false">取消</el-button>
        <el-button @click="updateUser">确定</el-button>
      </div>
    </el-dialog>

    <div style="margin-top: -185px">
      <p style="margin-left: 160px;">
        用户名称： <el-input v-model="name" style="width: 200px"
      placeholder="请输入用户名称">

      </el-input></p>


      <p style="margin-left: 600px;margin-top: -35px">
        手机号码： <el-input v-model="phone" style="width: 200px"
                        placeholder="请输入手机号"
      >
      </el-input>
        <el-button type="primary"  style="margin-left: 80px" @click="pageGetUser(1)">搜索</el-button>
        <el-button type="warning" style="margin-left: 25px"  @click="reset">重置</el-button>
        <el-button type="primary" style="margin-left: 25px" @click="adVisible=true">新增</el-button>

      </p>

      <el-table style="margin-left: 150px;width: 88%;margin-top: 10px"
                :data="pageInfo.list"
                size="mini"
                :header-cell-style=" {fontWeight:'bold',background:'#f8f8f9',color: '#515a6e',height:'40px'}">

        <el-table-column  :resizable="false"
                          prop="username"
                          label="用户名称"
        >
        </el-table-column>
        <el-table-column  :resizable="false"
                          prop="name"
                          label="昵称">
        </el-table-column>
        <el-table-column  :resizable="false"
                          prop="sysDeptRequest.name"
                          label="部门">
        </el-table-column>

        <el-table-column  :resizable="false"
                          prop="phone"
                          label="手机">
        </el-table-column>

        <el-table-column  :resizable="false"
                          label="状态">
          <template slot-scope="scope">
            <!-- {{scope.row.mg_state}}  slot-scope 作用域插槽 scope.row 可以获取当前所在行的数据 -->
            <!-- 开关  -->
            <el-switch :active-value="1" :inactive-value="0"

                       :value="scope.row.status"></el-switch>
          </template>

        </el-table-column>
        <el-table-column  :resizable="false"
                          prop="createTime"
                          label="创建时间">
        </el-table-column>

        <el-table-column prop="" label="执行操作"  :resizable="false" fixed="right">
          <el-row slot-scope="scope">

            <el-button type="primary" @click="showUd(scope.row)" icon="el-icon-edit"></el-button>
          </el-row>
        </el-table-column>


      </el-table>

      <el-pagination
        :page-sizes="[2]"
        :page-size ="2"
        layout="total, sizes, prev, pager, next"
        @current-change="pageGetUser"
        :total="pageInfo.total"
      ></el-pagination>
    </div>







  </div>
</template>

<script>
import * as systemAdminApi from '@/api/systemadmin.js'
import { pageGetUser } from "@/api/user";
import { addUser } from "@/api/user";
import { updateUser } from "@/api/user";
import { deptList } from "@/api/dept";
import * as roleApi from '@/api/role.js'
import edit from './edit'
import { checkPermi } from "@/utils/permission"; // 权限判断函数
export default {
  // name: "index"
  components: { edit },
  data() {
    return {
      filterText: '',
      depts: [],
      dept: {
        name: '',
        parentId: -1
      },
      pName: '',
      dialogVisible: false,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      id:0,
      udUser: {},
      adUser: {},
      adVisible:false,
      udVisible:false,
      current: '',
      pageInfo: {},
      name: '',
      phone: '',
      deptId: 0,
      constants:this.$constants,
      listData: { list: [] },
      listPram: {
        account: null,
        addTime: null,
        lastIp: null,
        lastTime: null,
        level: null,
        loginCount: null,
        realName: null,
        roles: null,
        status: null,
        page: 1,
        limit: this.$constants.page.limit[0]
      },
      roleList: [],
      menuList: [],
      editDialogConfig: {
        visible: false,
        isCreate: 0, // 0=创建，1=编辑
        editData: {}
      }
    }
  },
  mounted() {
    this.pageGetUser(1)
    this.initDepts()
  },


  methods: {

    handleClick(data, node){
      this.deptId=data.id;
      this.pageGetUser(1)
    },
    initDepts() {
      deptList().then(resp=> {
        this.depts=resp;
      })
    },
    //value值就是filterText的最新值，data数据就是形成tree的json数据
    filterNode(value, data) {
      // console.log(data)
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },

    showUd(user){
      this.udUser=user;
      this.id=user.sysDeptRequest.id
      this.udVisible=true;
    },

    updateUser(){
      this.udUser.deptId=this.id;
      updateUser(this.udUser).then(resp=> {

        this.udUser={};
        this.udVisible=false;
        this.reset()
      })
    },
    change(current){

      this.deptId=current;
      this.pageGetUser(1)
    },
    reset(){

      this.deptId=0;
      this.name='';
      this.phone='';
      this.pageGetUser(1)
    },

    checkPermi,
    onchangeIsShow(row) {
      systemAdminApi.updateStatusApi({id: row.id, status: row.status})
        .then(async () => {
          this.$message.success('修改成功');
          this.handleGetAdminList()
        }).catch(()=>{
        row.status = !row.status
      })
    },

    deptList(){

      deptList().then(resp=> {
        /*this.dList=resp;*/
      })
    },
    addUser(){

      addUser(this.adUser).then(resp=> {
        this.adUser={};
        this.adVisible=false;
        this.reset()
      })
    },
    pageGetUser(index){

      let user={
        name: this.name,
        phone: this.phone,
        deptId: this.deptId,
        index: index
      }
      pageGetUser(user).then(resp=> {
        this.pageInfo=resp;
      })

    },
    onchangeIsSms(row) {
      // this.$confirm(`此操作将${!row.isSms ? '开启' : '关闭'}验证, 是否继续？`, "提示", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning"
      // }).then(async () => {
      //   row.isSms = !row.isSms
      // }).catch(() => {
      //   this.$message.error('取消操作')
      // })

      if(!row.phone) return this.$message({
        message: '请先为管理员添加手机号!',
        type: 'warning'
      });
      systemAdminApi.updateIsSmsApi({id: row.id})
        .then(async () => {
          this.$message.success('修改成功');
          this.handleGetAdminList()
        }).catch(()=>{
        row.isSms = !row.isSms
      })
    },
    handleSearch() {
      this.listPram.page = 1
      this.handleGetAdminList()
    },
    handleSizeChange(val) {
      this.listPram.limit = val
      this.handleGetAdminList()
      this.handleGetRoleList(this.listPram)
    },
    handleCurrentChange(val) {
      this.listPram.page = val
      this.handleGetAdminList()
      this.handleGetRoleList(this.listPram)
    },
    handleGetRoleList() {
      const _pram = {
        page: 1,
        limit: this.constants.page.limit[4]
      }
      roleApi.getRoleList(_pram).then(data => {
        this.roleList = data
      })
    },
    handlerOpenDel(rowData) {
      this.$confirm('确认删除当前数据').then(() => {
        const _pram = { id: rowData.id}
        systemAdminApi.adminDel(_pram).then(data => {
          this.$message.success('删除数据成功')
          this.handleGetAdminList()
        })
      })
    },
    handleGetAdminList() {
      systemAdminApi.adminList( this.listPram ).then(data => {
        this.listData = data
        // this.handlerGetMenuList()
      })
    },
    handlerOpenEdit(isCreate, editDate) {
      this.editDialogConfig.editData = editDate
      this.editDialogConfig.isCreate = isCreate
      this.editDialogConfig.visible = true
    },
    handlerGetMenuList() { // 获取菜单全部数据后做menu翻译使用
      systemAdminApi.listCategroy({ page: 1, limit: 999, type: 5 }).then(data => {
        this.menuList = data.list
        this.listData.list.forEach(item => {
          const _muneText = []
          const menuids = item.rules.split(',')
          menuids.map(muid => {
            this.menuList.filter(menu => {
              if (menu.id == muid) {
                _muneText.push(menu.name)
              }
            })
          })
          item.rulesView = _muneText.join(',')
          this.$set(item, 'rulesViews', item.rulesView)
        })
      })
    },
    hideEditDialog() {
      this.editDialogConfig.visible = false
      this.handleGetAdminList()
    }
  }
}
</script>

<style scoped>


</style>
